<template>
    <div>
        <a-modal
            title="设置二维码"
            :visible="visible"
            @ok="handleOk"
            @cancel="visible = false"
            :width="800"
            class="setQRCode-modal-box"
            :forceRender="visible"
            :footer="null"
        >
            <a-form-model
                class="selectPrudently-form0-model-big-box"
                ref="ruleForm0"
                layout="inline"
            >         
                <a-descriptions bordered style="width: 100%;" >
                    <a-descriptions-item :span="3" v-if="formState.id">
                        <span slot="label" style="display: flex;align-items: center;">
                            设置在线报名
                        </span>
                        <a-radio-group :disabled="formState.currentSteps == 0 || formState.currentSteps == 1?false:true" :options="plainOptionsList" v-model:value="formState.fpxbmzt" @change="handleOk()" />
                    </a-descriptions-item>
                    <a-descriptions-item :span="3" v-if="formState.id">
                        <span slot="label" style="display: flex;align-items: center;">
                            设置在线签到
                        </span>
                        <a-radio-group :disabled="formState.currentSteps == 2?false:true" :options="plainOptionsList" v-model:value="formState.fpxqdzt" @change="handleOk()" />
                    </a-descriptions-item>
                    <a-descriptions-item :span="3" v-if="formState.id">
                        <span slot="label" style="display: flex;align-items: center;">
                            设置培训场次签到
                        </span>
                        <div style="display: flex;align-items: center;flex-wrap: wrap;">
                            <div v-for="(item,index) in qdccList" :key="index"  style="display: flex;align-content: center;">
                                <span style="display: flex;margin-right: 3px;font-weight: 600;width: 120px;justify-content: flex-end;">
                                    {{ item.fqdccbt }}
                                    <span>：</span>
                                </span>
                                <a-radio-group style="width: 155px;" :options="ccOptionsList" v-model:value="item.fqdzt" @change="ccztOk(item)"/>
                            </div>
                        </div>
                    </a-descriptions-item>
                    <a-descriptions-item :span="3" v-if="formState.id">
                        <span slot="label" style="display: flex;align-items: center;">
                            设置在线考试
                        </span>
                        <a-radio-group :disabled="formState.currentSteps == 3?false:true" :options="plainOptionsList" v-model:value="formState.fpxkszt" @change="handleOk()" />
                    </a-descriptions-item>
                    <a-descriptions-item :span="3" v-if="formState.id">
                        <span slot="label" style="display: flex;align-items: center;">
                            <span style="display: flex;justify-content: center;flex: 1;">
                                <span>二</span>
                                <span>维</span>
                                <span>码</span>
                            </span>
                        </span>
                        <div style="display: flex;align-items: center;padding: 5px 0;">
                            <canvas :key="canvasKey" :id="ScanvasId" width="100px" height="100px"></canvas>
                            <!-- <div style="display: flex;flex-direction: column;justify-content: space-between;margin-left: 10px;" >
                                <div style="display: flex;">
                                    <span style="font-weight: 600;">设置在线报名：</span>
                                    <a-radio-group :options="plainOptionsList" v-model:value="formState.fpxbmzt" @change="handleOk()" />
                                </div>
                                <div style="display: flex;">
                                    <span style="font-weight: 600;">设置在线签到：</span>
                                    <a-radio-group :options="plainOptionsList" v-model:value="formState.fpxqdzt" @change="handleOk()"/>
                                </div>
                                <div style="margin: 10px 10px;">
                                    <span style="font-weight: 600;">培训场次：</span>
                                    <div style="display: flex;align-items: center;flex-wrap: wrap;">
                                        <div v-for="(item,index) in qdccList" :key="index"  style="display: flex;align-content: center;">
                                            <span style="display: flex;margin-right: 3px;font-weight: 600;width: 80px;justify-content: flex-end;">
                                                {{ item.fqdccbt }}
                                                <span>：</span>
                                            </span>
                                            <a-radio-group style="width: 155px;" :options="ccOptionsList" v-model:value="item.fqdzt" @change="ccztOk(item)"/>
                                        </div>
                                    </div>
                                </div>
                                <div style="display: flex;">
                                    <span style="font-weight: 600;">设置在线考试：</span>
                                    <a-radio-group :options="plainOptionsList" v-model:value="formState.fpxkszt" @change="handleOk()"/>
                                </div>
                            </div> -->
                        </div>
                    </a-descriptions-item>
                    
                </a-descriptions>
            </a-form-model>
        </a-modal>
    </div>
</template>
<script>
import {jcylxjhupdateLxjh,jcylxjhqueryById,jcylxjhqueryLxqdccList,jcylxjhupdateLxpxqdcs} from './service/index'
import {qrcanvas} from 'qrcanvas'
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            visible:false,
            formState:{},
            ScanvasId:'canvas3'+ new Date().getTime(),
            canvasKey:null,
            newImage:new Image(),
            queryResultsQr:null,
            queryResultsImgUrl:'',
            formState:{
                fpxbmzt:'不启用',
                fpxqdzt:'不启用',
                fpxkszt:'不启用',
            },
            plainOptionsList:[{
                label:'启用',
                value:'启用',
            },{
                label:'不启用',
                value:'不启用',
            }],
            ccOptionsList:[{
                label:'启用',
                value:'启用',
            },{
                label:'不启用',
                value:'不启用',
            }],
            qdccList:[],
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(row){
            jcylxjhqueryById({id:row.id}).then(res=>{
                if(res.code == 200){
                    this.formState = {...res.result,currentSteps:row.currentSteps}
                }else{
                    this.formState = row
                }
            })
            this.queryResultsQr = qrcanvas({
                data: bootConfig[process.env.NODE_ENV].EXTERNAL_ACCESS_URL2+process.env.BASE_URL+`selectionRegistrationValidate?flxjhid=`+row.id|| "二维码生成中",
                size:260,
                background:'#fff'
            })
            this.queryResultsImgUrl = this.newImage.src = this.queryResultsQr.toDataURL("image/png")
            // this.canvasKey = Date.now()

            var that = this
            this.$nextTick(()=>{
                setTimeout(() => {
                    var canvas = document.getElementById(that.ScanvasId);
                    //console.log(document.getElementById(that.ScanvasId))
                    var context = canvas.getContext('2d');
                    context.font = "16px Arial"
                    context.textAlign = "center"
                    // context.globalCompositeOperation = 'source-in';
                    context.fillStyle = "#000";
                    context.background = '#fff'
                    // context.fillText('xx食品药品审评查验中心现场咨询预约登记表',236,30);
                    var img = new Image();
                    img.onload = function() {
                        context.drawImage(img, 0, 0,100,100);
                    }
                    img.src = that.queryResultsQr.toDataURL("image/png");
                }, 200)
                
            })
            this.getQdccList(row)
        },
        getQdccList(row){
            jcylxjhqueryLxqdccList({flxjhid:row.id}).then(res=>{
                if(res.code == 200){
                    this.qdccList = res.result.records
                }else{
                    this.qdccList = []
                }
            })
        },
        ccztOk(item){
            jcylxjhupdateLxpxqdcs({fqdzt:item.fqdzt,flxjhid:this.formState.id,id:item.id}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        handleOk(){
            let data = {
                id:this.formState.id,
                fpxbmzt:this.formState.fpxbmzt,
                fpxqdzt:this.formState.fpxqdzt,
                fpxkszt:this.formState.fpxkszt,
            }
            jcylxjhupdateLxjh(data).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                    // this.visible = false
                }else{
                    this.$message.warning(res.message)
                }
            })
        }
    }
}
</script>
<style lang="less">
.setQRCode-modal-box{
    .selectPrudently-form0-model-big-box{
        .ant-descriptions-bordered .ant-descriptions-item-label{
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
            background-color:#e6f7ff;
            width: 150px !important;
            text-align: center;
            
            font-family:simHei !important;
            span{
                justify-content: center;
                span{
                    justify-content: center;
                }
            }
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            padding: 5px 10px !important;
            
        }
        .descriptions-label-slot{
            display: flex;
            align-items: center;
            width: 160px !important;//确保左侧固定文字不会换行
            justify-content: center;
        }
        .xhText{
            display: inline-block;
            color: #f5222d;
            line-height: 31px;
            padding-right: 2px;
            font-size: 14px;
            font-weight: 600;
            height: 30px;
        }
        .descriptions-item-center{
            
        }
        .ant-form-inline .ant-form-item-with-help{
            margin-bottom: 0px !important;
        }
        .zm-form-model{
            display: flex;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
        .ant-form-item-control-wrapper{
            font-family:仿宋_GB2312 !important;
        }
        .ant-descriptions-bordered .ant-descriptions-row{
            border-bottom: 1px solid #e4e3e3;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            border-right: 1px solid #e4e3e3;
        }
        .ant-descriptions-bordered .ant-descriptions-view{
            border: 1px solid #e4e3e3;
            border-right: 0;
        }
        .ant-descriptions-row:last-child{
            border-bottom: 0;
        }
        
    }
}

</style>